<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0044)https://www.jq22.com/demo/jQuery-tc20160113/ -->
<html xmlns="http://www.w3.org/1999/xhtml">
{% load static %}
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>jQuery制作侧边悬浮折叠影藏弹窗特效</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            font-size: 12px;
        }

        .main {
            width: 260px;
            height: 200px;
            position: fixed;
            bottom: 60px;
            border: 1px solid #ccc;
        }

        * html .main {
            position: absolute;
            top: expression(eval(document.documentElement.scrollTop));
            margin-top: 320px;
        }

        .main2 {
            width: 240px;
            height: 180px;
            position: relative;
            padding: 10px;
        }

        .main2 ul li {
            width: 100%;
            height: 22px;
            line-height: 22px;
            text-align: left;
        }

        .main2 ul li a {
            color: #444;
            text-decoration: none;
        }

        .main2 ul li a:hover {
            text-decoration: underline;
            color: #000;
        }

        .bar {
            width: 25px;
            height: 105px;
            position: absolute;
            right: -25px;
            top: -1px;
            background: url(images/mini_bg.png) no-repeat;
            display: block;
        }
    </style>

</head>
<body>

<div style="height:1000px;"></div>

<div class="main" style="left: 0px;">
    <div class="main2"><a href="javascript:" class="bar"></a>
        <ul>
            <li><a href="">窗户玻璃雨滴逼真效果</a></li>
            <li><a href="">窗户玻璃雨滴逼真效果</a></li>
            <li><a href="">窗户玻璃雨滴逼真效果</a></li>
            <li><a href="">窗户玻璃雨滴逼真效果</a></li>
        </ul>
    </div>
</div>
<script src="{% static 'js/kaidan_restaurant_nav/jquery.min.js(1).下载' %}"></script>

<script type="text/javascript">
    $(function () {

        /*$('.main').css('left','-262px');

        var expanded = true;

        $('.bar').click(function(){
            if(expanded){
                $('.main').animate({left:'0'},500);
                $('.bar').css('background-position','-25px 0px');
            }else{
                $('.main').animate({left:'-262px'},500);
                $('.bar').css('background-position','-0px 0px');
            }
            expanded = !expanded;
        });*/

        $('.main').css('left', '0px');

        var expanded = true;

        $('.bar').click(function () {
            if (expanded) {
                $('.main').animate({left: '-262'}, 500);
                $('.bar').css('background-position', '-25px 0px');
            } else {
                $('.main').animate({left: '0px'}, 500);
                $('.bar').css('background-position', '-0px 0px');
            }
            expanded = !expanded;
        });

    });
</script>
</body>
</html>